import React from 'react';
import {NavLink} from 'react-router-dom'
import {inaddproduct} from '../action/cart'
import {connect} from 'react-redux'
import {getdata} from '../action/cart'
import configureStore from './../store';
let {store,persistor} = configureStore();

function objchangestring(obj){

	var arr=[];
	for(var i in obj){
		arr.push(i+'='+obj[i]);
	}
	return arr.join('&');
}
var $ = (function(){
    var ajax=function(url,callback,obj){
         var xhr=new XMLHttpRequest();
         xhr.open("POST",url,true);
         if(obj){
            var Obj=objchangestring(obj);
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
         xhr.send(Obj); 
         }else{
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send('');   
         }
         xhr.onreadystatechange=function(){
           if(xhr.readyState==4&&xhr.status==200){
                 callback(JSON.parse(xhr.responseText));
           }
         }
    }
    return {
      http:ajax    
     }

 })();

class Product extends React.Component{
    constructor(props) {
        console.log('123',props)
        super(props);
    this.state={
        page:{
            num:1,
        },
        data:{
            data:[1]
        }
   }
    }
    handl(e){
        var that=this;
        console.log(e.target.getAttribute('value'));
        var ele=document.getElementsByClassName('pagination')[0].childNodes;
        var length=ele.length;
        for(var i=0;i<length;i++){
            ele[i].className=''
        };
        e.target.parentNode.className='active';
       that.setState({ 
        page:Object.assign({},that.state.page,{num:e.target.getAttribute('value')})
       });
       this.getdata({page:e.target.getAttribute('value')})
    }
    getdata(a){
        var arr=[];
        var that=this;
        $.http('http://10.31.153.45:3000/latiao/list',function(data){
             arr.push(data.docs)
            that.setState({
                data: Object.assign({}, that.state.data, {data:arr}),
            })   
    },a);
    }
    componentWillMount(){
        console.log('mount');
        this.getdata({page:1});
    }
    shouldComponentUpdate(nextProps,nextState){
        console.log("shouldComponentUpdate");
            return true;    
    }
    componentWillUpdate(){
        console.log('update')
        //this.getdata({page:this.state.page.num})
    }
    componentDidUpdate(){
        console.log('success')
    }
    handleradd=(e)=>{
        // console.log(e.target.getAttribute("productId"),11111)
        // this.props.inaddproduct({productId:e.target.getAttribute("productId")})
        
        this.props.inaddproduct({
            productId:e.target.getAttribute("productId"),
            url:e.target.getAttribute("nurl"),
            price:e.target.getAttribute("nprice"),
            title:e.target.getAttribute("ntitle"),
        })
        
    }
    render(){
        var style= { width:"100%",height:"200px"};
        var style1={height:'100px'};
        let list = [];
       // console.log(this.state.data.data[0]);
			for(var i=0;i<this.state.data.data[0].length;i++){
                var a=this.state.data.data[0][i];
                
                var link='/detail/'+a._id+"/"+this.state.page.num;
              // console.log(this.state.data.data[0][0]);
                console.log(link);
                list.push(
                    <div className="col-sm-6 col-md-3">
                    <div className="thumbnail">
                <img src={this.state.data.data[0][i].src} alt={this.state.data.data[0][i].name} style={style}/>
                <div className="caption">
                    <h3  style={style1}>{this.state.data.data[0][i].name}</h3>
                    <p>{this.state.data.data[0][i].detail}</p>
                    <p>价格：{this.state.data.data[0][i].price}</p>
                    <p><NavLink to={link}><a href="#" className="btn btn-primary" role="button">查看详情 </a></NavLink><a href="#" className="btn btn-default" role="button">加入购物车</a></p>
                </div>
                </div>
                
                    </div>
                )
            }
        return(
            <div>
                 <div className="row">
                    {list}
                        
                    </div>
            
                <nav aria-label="..." className="text-center" onClick={this.handl.bind(this)}>
                    <ul className="pagination" >
                        <li className="disabled">
                            <span>
                            <span aria-hidden="true">&laquo;</span>
                            </span>
                        </li>
                        <li>
                        <span  value='1'>1 <span className="sr-only">(current)</span></span>
                        </li>
                        <li>
                        <span value='2'>2<span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='3'>3 <span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='4'>4 <span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='5'>5 <span className="sr-only">(current)</span></span>
                        </li><li>
                        <span value='6'>6 <span className="sr-only">(current)</span></span>
                        </li>
                        <li className="disabled">
                            <span>
                            <span aria-hidden="true">&raquo;</span>
                            </span>
                        </li>
                    </ul>
                </nav>
                <div className="alert alert-success" role="alert">...</div>
            </div>
        )
    }
}

/*
mapStateToProps
mapDispatchToProps


newComp = connect(mapStateToProps,mapDispatchToProps)(Comp)
*/

const mapStateToProps = state=>{
    console.log('456111',state)
    
    return{
        ...state
    }
}
// export default Product;
export default connect(mapStateToProps,{inaddproduct})(Product);
